// cover some element-ui styles
// @import 'components/variables.theme';
// 1: Initialize
@import '@/assets/umbe/root';

// Bootstrap theme colors
$expand-theme-colors: (
  'data': $purple,
  'default': $gray-500
) !default;

.el-tag {
  // Theme colors
  @each $name, $color in $expand-theme-colors {
    // Solid style
    &.el-tag--#{$name} {
      background-color: mix($color, $white, 10%);
      border-color: mix($color, $white, 20%);
      color: mix($color, $white, 100%);
    }

    // Outline style
    &--dark {
      &.el-tag--#{$name} {
        background-color: mix($color, $white, 100%);
        border-color: mix($color, $white, 100%);
        color: mix($color, $white, 0);
      }
    }

    // Light style
    &--plain {
      &.el-tag--#{$name} {
        background-color: mix($color, $white, 0);
        border-color: mix($color, $white, 40%);
        color: mix($color, $white, 100%);
      }
    }
  }
  &--light {
    border: none;
  }

  &--mini {
    line-height: 20px;
    transform: scale(0.9);
    transform-origin: left center;
  }
}
.is-right,
.text-right {
  .el-tag--mini {
    transform-origin: right center;
  }
}

.el-avatar {
  background-color: #dfe4ed;
  &--mini {
    width: 20px;
    height: 20px;
    line-height: 20px;
  }
}

.el-alert {
  padding: 12px 16px;
  &__icon {
    margin-right: 10px;
  }
  &__content {
    padding: 0;
  }
  &--primary {
    &.is-light {
      background-color: mix($primary, $white, 8%);
      color: $primary;

      .el-alert__description {
        color: $primary;
      }
    }

    &.is-dark {
      background-color: $primary;
      color: $white;
    }
  }
  &--tips {
    &.is-light {
      background-color: mix($warning, $white, 8%);
      color: $warning;

      .el-alert__description {
        color: $warning;
      }
    }

    &.is-dark {
      background-color: $warning;
      color: $white;
    }
  }
  & + & {
    margin-top: 1rem;
  }
}

.el-table {
  $last-rule: &;
  &--enable-row-hover #{$last-rule}__body tr:hover > td,
  &__body tr.hover-row > td,
  tbody tr:hover > td {
    background-color: transparent;
  }
}

.el-tabs__item,
.el-menu-item {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.el-menu-item {
  [class*=' em-icon-'],
  [class^='em-icon-'] {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
  }

  [class*=' em-icon-shape-'],
  [class^='em-icon-shape-'] {
    font-size: 20px;
  }
}
.el-rate__text {
  font-size: 12px;
}

.el-loading-parent {
  &--relative {
    min-height: 300px;
  }
}
